<template>
  <div class="common-layout">
    <div class="header">
      <div class="background">
        <div class="background-cover">
          <span v-for="i in 10" :key="i" class="background-cover-circle"></span>
        </div>
      </div>
      <div class="user">
        <div class="photo">
          <img
            :src="user_info.photo ? user_info.photo:photo_default"
            alt=""
            :class="{'rotate360':showAnimate, 'rotate-360':!showAnimate}"
            @mouseenter="rotate_photo"
            @mouseleave="rotate_photo"
          >
        </div>
        <h1 class="name">{{ user_info.name }}</h1>
        <p class="lead">{{ user_info.signature ? user_info.signature:'这个人很懒，什么都没有写。' }}</p>
      </div>
    </div>
    <div class="content">
      <Catalogue/>
      <div class="article-display">
        <ArticleDisplay :display-articles="article_list"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Catalogue from '../components/Catalogue.vue';
import ArticleDisplay from '../components/ArticleDisplay.vue';
import { useStore } from '../stores';
import { useRoute, useRouter } from 'vue-router';
import { ElNotification } from 'element-plus';
import { getArticle_author, login } from '../api/api'
import { useDefaultPhoto } from '../stores/photo';

const photo_default = ref(useDefaultPhoto().photoUrl)
const user_info = ref({
  // 已实装信息
  name: '',
  signature: '',
  photo: '',
  // 还未实装信息
  id: '',
  email: '',
  sex: '',
  phone: '',
  address: ''
})
const article_list = ref([])


// 初始化数据
const store = useStore()
const route = useRoute()
const router = useRouter()
onMounted(() =>{
  // =======================需要改加密！！！不安全访问！！！需要改加密======================= //
  // 根据路由参数获取用户数据---可访问其他用户
  if (route.query?.userid) {
    let userID = route.query?.userid
    login(userID).then(response => {
      getUserInfo(response.data)
      getArticleList()
    }).catch(error => {
      console.log(error)
      router.push({name: 'home'})
      if (error.response.status == 404) {
        ElNotification({
          title: '404 Not Found',
          message: '没有该用户ID耶 Σ( ° △ °|||)︴',
          type: 'error'
        })
      }
    })
  }
  // =======================需要改加密！！！不安全访问！！！需要改加密======================= //
  // 若没有路由参数则判断是否登录
  else {
    if (!store.userToken) {
      router.push({name: 'home'})
      ElNotification({
        title: '您还未登录',
        message: '登录才能查看个人主页 ╮(╯▽╰)╭',
        type: 'warning'
      })
    } else {
      getUserInfo(store)
      getArticleList()
    }
  }
})

// 获取个人信息
const getUserInfo = async (userData) => {
  user_info.value.name = userData.name
  user_info.value.signature = userData.signature
  user_info.value.photo = userData.photo
  user_info.value.id = userData.id
  user_info.value.email = userData.email
  user_info.value.sex = userData.sex
  user_info.value.phone = userData.phone
  user_info.value.address = userData.address
}

// 获取文章数据
const getArticleList = () => {
  getArticle_author(user_info.value.id).then(response => {
    article_list.value = response.data.reverse()
  }).catch(error => console.log(error))
}

// 鼠标交互 控制头像播放旋转动画
const showAnimate = ref(false)
const rotate_photo = () => {
  showAnimate.value = !showAnimate.value
}

// 初始化回到页面顶部
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
window.scrollX = 0
</script>

<style scoped>
.common-layout {
  height: fit-content;
  width: 100%;
}

.header {
  height: 100vh;
  background: url(https://sam-1306698532.cos.ap-nanjing.myqcloud.com/pic/bg1.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.background {
  height: 100%;
  width: 100%;
  top: 0;
  position: absolute;
}

.background-cover {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(rgba(0,0,0,0.1) 50%, transparent 0);
  background-size: 3px 3px;
  background-repeat: repeat;
}

.background-cover-circle {
  position: absolute;
  border-radius: 50%;
}

.user {
  top: 30%;
  margin: 0 auto;
  height: max-content;
  width: max-content;
  color: white;
  text-align: center;
}

.user > h1 {
  font-size: 3.3rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .5rem;
}

.user > p {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.photo {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.photo > img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
  border-radius: 50%;
  box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%) !important;
}

.content {
  min-height: 500px;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
	align-items: center;/* 垂直居中 */
}

.article-display {
	width: 100%;
	padding: 4rem;
}

.rotate360 {
  animation: rotate360 1s;
}

.rotate-360 {
  animation: rotate-360 1s;
}

@keyframes rotate360 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-360 {
  100% {
    transform: rotate(-360deg);
  }
}

.background-cover-circle:nth-child(1) {
  height: 150px;
  width: 150px;
  bottom: auto;
  left: -4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(2) {
  height: 50px;
  width: 50px;
  top: 10%;
  right: 4%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(3) {
  height: 50px;
  width: 50px;
  top: 280px;
  right: 5.66666%;
  background: rgba(255, 255, 255, .3);
}
.background-cover-circle:nth-child(4) {
  height: 75px;
  width: 75px;
  top: 320px;
  right: 7%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(5) {
  height: 100px;
  width: 100px;
  top: 38%;
  right: auto;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
.background-cover-circle:nth-child(6) {
  width: 200px;
  height: 200px;
  top: 44%;
  right: auto;
  left: 10%;
  background: rgba(255, 255, 255, .15);
}
.background-cover-circle:nth-child(7) {
  height: 50px;
  width: 50px;
  right: 36%;
  bottom: 50%;
  background: rgba(255, 255, 255, .04);
}
.background-cover-circle:nth-child(8) {
  height: 100px;
  width: 100px;
  right: 2%;
  bottom: 70px;
  background: rgba(255, 255, 255, .2);
}
.background-cover-circle:nth-child(9) {
  height: 50px;
  width: 50px;
  right: 2%;
  bottom: 1%;
  background: rgba(255, 255, 255, .1);
}
.background-cover-circle:nth-child(10) {
  height: 100px;
  width: 100px;
  right: auto;
  bottom: 1%;
  left: 1%;
  background: rgba(255, 255, 255, .05);
}
</style>